<template>
  <div id="PieVoice"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'PieVoice',
  data () {
    return {
      myChart: null,
      // 数据
      simdata: {
        // 总量
        a: 100,
        // 已使用
        b: 20,
        // 剩余
        c: 80
      },
      // 剩余使用量
      percent: null
    }
  },
  created () {
    echarts.use([
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer,
      LabelLayout,
      TitleComponent
    ])
  },
  mounted () {
    // 计算中间饼图使用率
    this.percent = (this.simdata.b / this.simdata.a).toFixed(2) * 100 + '%'
    // 找到这个容器
    this.myChart = echarts.init(this.$el)
    // 配置项
    let option = {
      // 鼠标移入上面时候-提示框组件
      tooltip: {
        trigger: 'item'
      },
      // 实例title
      legend: {
        top: '5%',
        left: 'left',
        // 纵向布局
        orient: 'vertical'
        // 图例高度
        // itemHeight: 6,
        // show: false
      },
      // 工具箱-下载
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      // 饼图中间-数据
      title: {
        text: this.percent,
        top: 'middle',
        left: 'center',
        width: 110,
        textStyle: {
          color: '#333',
          fontSize: 27,
          fontWeight: 'bold'
        }
      },
      series: [
        {
          name: '语音套餐',
          type: 'pie',
          // 饼图半径
          radius: ['50%', '70%'],
          // 相对于父容器比例
          center: ['50%', '50%'],
          // 防止标签间的重叠-默认开启true
          avoidLabelOverlap: false,
          // 数据名称-静态
          label: {
            formatter: '{name|{c}}分钟\n\n{num|{b}}',
            padding: [0, -70],
            width: 100,
            rich: {
              name: {
                fontSize: 14,
                color: '#333',
                fontWeight: 'bold'
              },
              num: {
                fontSize: 12,
                color: '#999'
                //lineHeight:15
              }
            }
          },
          // 选中图标-标题样式-静态
          emphasis: {},
          // 引导线
          labelLine: {
            length: 15,
            length2: 80
          },
          data: [
            {
              value: this.simdata.b,
              name: '已使用量',
              itemStyle: { color: '#21DA7C' }
            },
            {
              value: this.simdata.c,
              name: '剩余可使用量',
              itemStyle: { color: '#3586FF' }
            }
          ]
        }
      ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
#PieVoice {
  width: 100%;
  height: 100%;
}
</style>
